<template>
  <div class="process">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              size="medium"
              v-model="foodName"
              placeholder="查询"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="getRecord"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="">
            <el-button
              size="small"
              type="warning"
              @click="notEmpty"
              icon="el-icon-delete-solid"
              >清空</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              size="small"
              @click="newest(1)"
              icon="el-icon-circle-plus-outline"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div>
          <el-table
            :data="tableData"
            border
            v-loading="loadFlag"
            style="width: 100%"
          >
            <el-table-column prop="processName" label="流程名称" width="">
            </el-table-column>
            <el-table-column prop="data" label="时间" width="">
            </el-table-column>
            <el-table-column prop="remarks" label="备注"> </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template #default="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="editorTheme(scope.row, 2)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="pagingClass">
            <el-pagination
              :page-sizes="m_page.sizes"
              :page-size="m_page.size"
              :current-page="m_page.number"
              @size-change="m_handleSizeChange"
              @current-change="m_handlePageChange"
              layout="total,sizes,prev, pager, next"
              background
              :total="m_page.totalElements"
            ></el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 编码 表单 -->
    <el-dialog
      title="流程设计"
      v-model="plassets"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="流程名称">
          <el-input
            v-model="form.nameless"
            style="width: 300px"
            placeholder="流程名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="编码">
          <el-input
            v-model="form.coding"
            style="width: 300px"
            placeholder="流程名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="表单">
          <el-select
            v-model="form.formgroup"
            style="width: 300px"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in errorInForm"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            style="width: 300px"
            v-model="form.dates"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            style="width: 300px"
            v-model="form.addnote"
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
        <el-form-item label="流程设计">
          <div class="accept" v-for="(item, i) in getProcess" :key="i">
            <el-form :model="form" ref="form" label-width="100px">
              <div class="filter">
                <el-form-item label="名称">
                  <el-input
                    v-model="item.nodeName"
                    style="width: 300px"
                    placeholder="名称"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="rolling">
                <el-form-item label="审批人" style="margin-top: 10px">
                  <el-select
                    v-model="item.approvalIds"
                    placeholder="请选择审批人"
                    style="width: 200px"
                  >
                    <el-option
                      v-for="item in anyone"
                      :key="item.value"
                      :label="item.label"
                      :value="'' + item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序" style="margin-top: 10px">
                  <el-input
                    type="number"
                    v-model.number="item.sort"
                    style="width: 100px"
                    placeholder="排序"
                  >
                  </el-input>
                  <!-- <span>{{ i + 1 }}</span> -->
                </el-form-item>
                <el-form-item label="是否有效" style="margin-top: 10px">
                  <el-radio v-model="item.isEffective" :label="1">是</el-radio>
                  <el-radio v-model="item.isEffective" :label="2">否</el-radio>
                </el-form-item>
                <el-form-item label="节点类型" style="margin-top: 10px">
                  <el-radio v-model="item.nodeType" :label="1">会签</el-radio>
                  <el-radio v-model="item.nodeType" :label="2">正常</el-radio>
                </el-form-item>
              </div>
              <div class="handle">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  circle
                  @click="AddPage(i + 1)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleted(i)"
                ></el-button>
              </div>
            </el-form>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer" style="text-align: center">
          <el-button type="success" v-if="under == 1" @click="determine()"
            >确定</el-button
          >
          <el-button @click="hardware()" v-else type="success"
            >编辑 确 定</el-button
          >
          <el-button @click="plassets = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      foodName: "",
      loadFlag: false, //加载flag
      mLast: "",
      form: {
        nameless: "",
        coding: "", //编码
        formgroup: "", //表单
        dates: "",
        addnote: "", //备注
      },
      errorInForm: [], //表单
      plassets: false,
      financial: "", //财务
      submit: "",
      approver: "", //审批人
      m_approvers: "",
      anyone: [], //人员
      headerObj: "",
      getProcess: [
        {
          nodeName: "", //名字
          sort: 1, //排序
          isEffective: 1, //是否有效
          nodeType: 2, // 节点类型:1会签;2正常
          approvalIds: "", //审批人(可以设置多个审批,中间用','隔开)
        },
      ],
      tableData: [],
      under: 1,
      underID: "",
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 10,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.author();
    this.getForm();
    this.getRecord();
  },
  methods: {
    AddPage(i) {
      this.getProcess.splice(i + 1, 0, {
        nodeName: "",
        sort: +i + 1,
        isEffective: 1,
        nodeType: 2,
        approvalIds: "",
      });
      console.log(this.getProcess);
    },
    deleted(index) {
      console.log(index);
      this.getProcess.splice(index, 1);
    },
    newest() {
      this.plassets = true;
      this.form.nameless = "";
      this.form.coding = "";
      this.form.formgroup = "";
      this.form.dates = "";
      this.form.addnote = "";
      this.getProcess.forEach((item) => {
        item.sort = 1;
        item.isEffective = 1;
        item.nodeType = 2;
        item.approvalIds = "";
      });
    },
    //新增流程设计
    forward() {
      console.log(JSON.stringify(this.getProcess));
    },
    notEmpty() {
      this.foodName = "";
      this.getRecord();
    },
    //删除
    handleDelete(row) {
      let into = row;
      console.log(into);
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/ProcessDesign`,
              {
                id: into.id,
                processName: into.processName, //流程名称
                flowCode: into.flowCode, //编码
                tableName: into.tableName, //表单
                data: into.data, //时间
                State: into.State, //状态:1启用;2暂停
                isDelete: 1,
                remarks: into.addnote,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              // console.log(res);
              this.getRecord();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑确定
    hardware() {
      this.$axios
        .post(
          `api/serial/ProcessDesign`,
          {
            id: this.underID,
            processName: this.form.nameless, //流程名称
            flowCode: this.form.coding, //编码
            tableName: this.form.formgroup, //表单
            data: dayjs(this.form.dates).format("YYYY-M-D"), //时间
            processDesignDetailsList: this.getProcess, //流程设计
            State: 1, //状态:1启用;2暂停
            remarks: this.form.addnote,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          //  console.log(res);
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.plassets = false;
          this.getRecord();
        })
        .catch(() => {
          this.$message.error("编辑失败");
        });
    },
    //编辑流程
    editorTheme(row, index) {
      console.log(index);
      this.under = index;
      this.plassets = true;
      this.underID = row.id;

      this.$axios({
        methods: "GET",
        url: "api/serial/ProcessDesign",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          query: {
            id: this.underID,
          },
        },
      }).then((res) => {
        this.fontify = res.data.data[0];
        // console.log(this.fontify);
        this.form.nameless = this.fontify.processName;
        this.form.coding = this.fontify.flowCode;
        this.form.formgroup = this.fontify.tableName;
        this.form.dates = this.fontify.data;
        this.getProcess = this.fontify.processDesignDetailsList;
        this.form.addnote = this.fontify.remarks;
      });
    },

    //确定
    determine() {
      this.$axios
        .post(
          `api/serial/ProcessDesign`,
          {
            processName: this.form.nameless, //流程名称
            flowCode: this.form.coding, //编码
            tableName: this.form.formgroup, //表单
            data: dayjs(this.form.dates).format("YYYY-M-D"), //时间
            processDesignDetailsList: this.getProcess, //流程设计
            State: 1, //状态:1启用;2暂停
            remarks: this.form.addnote,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          //  console.log(res);
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.plassets = false;
          this.getRecord();
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    //获取数据
    getRecord() {
      this.loadFlag = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/ProcessDesign",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          query: {
            processName: this.foodName,
          },
        },
      }).then((res) => {
        ({ data: this.tableData, count: this.m_page.totalElements } = res.data);
        // this.tableData.forEach((item) => {
        //   item.startDate = dayjs(item.startDate).format("YYYY-M-D");
        // });
        this.loadFlag = false;
      });
    },
    //获取表单设计
    getForm() {
      this.$axios({
        methods: "GET",
        url: "api/serial/Dictionaries",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: 100,
          pageIndex: 1,
          query: {
            type: 2,
          },
        },
      }).then((res) => {
        console.log(res.data.data);
        let temps = res.data.data;
        temps.forEach((item, index) => {
          this.errorInForm[index] = {
            value: item.value + "",
            label: item.text,
          };
        });
      });
    },
    //获取人员
    author() {
      this.$axios
        .get(`api/serial/Users?pageSize=${100}&pageIndex=${1}`, {
          headers: {
            Authorization: this.headerObj,
          },
        })
        .then((res) => {
          // console.log(res);
          let initData = res.data.data;
          let trees = [];
          initData.forEach((item, index) => {
            trees[index] = {
              value: item.id,
              label: item.name,
            };
          });
          this.anyone = trees;
        });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.production();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.production();
    },
  },
};
</script>

<style scoped>
.process {
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
  overflow: hidden;
}
.accept {
  width: 500px;
  height: 300px;
  /* background-color: #ff943e; */
  border-radius: 20px;
  margin: auto;
  box-shadow: 0 1px 35px 0 rgb(0 0 0 / 30%);
  background-color: #fff;
  /* margin-top: 50px; */
  overflow: hidden;
  margin-bottom: 30px;
}
.filter {
  width: 100%;
  height: 40px;
  background-color: #ff943e;
  /* line-height: 40px;
  padding-left: 20px; */
  color: #fff;
}
.rolling {
  width: 100%;
  margin: auto;
}
.handle {
  width: 100%;
  height: 50px;
  margin: auto;
  text-align: center;
}
</style>